<template>
  <div>
    <h2>app组件</h2>
    <ul>
      <!-- 路由路口 -->
      <!-- 声明式路由<router-link :to="...">	
            编程式路由router.push(...) -->
      <li><router-link to="/">首页</router-link></li>
      <li><router-link to="/about">关于</router-link></li>
      <!-- 路由参数 -->
      <li><router-link to="/my/周志超/18?a=1&b=2">我的</router-link></li>
      <li><router-link to="/basketball">篮球</router-link></li>
    </ul>

    <button @click="handler1">去MyView</button>
    <button @click="handler2">去AboutView</button>

    <p>
      <!-- 路由出口 -->
      <router-view></router-view>
    </p>
  </div>
</template>

<script setup>
// 编程式路由
import { useRouter } from "vue-router";
const router = useRouter();

const handler1 = () => {
  router.push({ path: "/my/:username/:age" });
};
// 命名路由
const handler2 = () => {
  router.push({ name: "gy" });
};
</script>

<style lang="scss" >
ul {
  list-style-type: none;
  display: flex;
  li {
    font-size: 25px;
    margin: 0 8px;
  }
}
</style>